<template>
  <div class="v-header">
    <!-- el-breadcrumb 面包屑导航 -->
    <!-- separator 分隔符 -->
    <el-breadcrumb class="breadcrumb" separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a :href="$route.fullPath">{{ $route.meta.title }}</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- dropdown下拉菜单 -->
    <!-- command：：点击菜单对应的事件 -->
    <el-dropdown @command="handleCommand" class="dropdow">
      <span class="el-dropdown-link">
        {{userInfo.username}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-user">个人信息</el-dropdown-item>
        <el-dropdown-item icon="el-icon-switch-button" command="a">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
// 导入辅助函数
import {mapState} from 'vuex'
export default {
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    handleCommand(command) {
      if(command === 'a') {
        // 退出登录
        this.$router.push('/login');
        // 清除信息
        this.$store.commit('clearUserInfo')
      }
    }
  },
};
</script>

<style>
.v-header .breadcrumb {
  line-height: 60px;
  float: left;
}
.v-header .dropdow{
  float: right;
  line-height: 60px;
}
</style>